<template>
   <div>
      <Headers></Headers>
      <Menu></Menu>
      <!-- <Discount></Discount> -->
      <PlaySort></PlaySort>
      <div class="list">
         <!-- 多列 -->
         <Banner></Banner>
         <!-- 循环 传参banners，proname，sales，originprice-->
      <List v-for="(v, index) in arrList1" :key="index" :img1="v.img1" :proname="v.proname" :originprice="v.originprice"
        :sales="v.sales" @click.native="goDetail1(v)"></List>
      </div>
      <Footer></Footer>
      <TabBar></TabBar>
   </div>
</template>

<script>
import Headers from '../HomeCom/Headers.vue'
import Menu from '../HomeCom/Menu.vue'
// import Discount from '../HomeCom/Discount.vue'
import Banner from '../HomeCom/Goods/Banner.vue'
import List from '../HomeCom/Goods/List.vue'
import TabBar from '../HomeCom/Repeat/TabBar.vue'
import Footer from '../HomeCom/Footer.vue'
import PlaySort from '@/components/hf/HomeCom/playSortCom/playSort.vue'

export default {
   components: {
      Headers,
      Menu,
      // Discount,
      Banner,
      List,
      TabBar,
      Footer,
      PlaySort

   },
   data() {
      return {
         // 瀑布流
         arrList1: [],
      }
   },

   methods: {
      async getList() {
         const { data: res } = await this.$http.get('http://118.178.238.19:3001/api/pro/list',
            {
               params:{
            count: 6,
            limitNum: 20

         }
           })
         this.arrList1 = res.data
         }

,
      //进入详情页 ,点击传入数组每一项对象,传的数据是对象需要转为字符串
      goDetail1(v) {
        window.scrollTo({top:0})
         this.$router.push({
            path: '/detail',
            query: {
               delList: JSON.stringify(v)

            }
         })
      }
   },
   mounted() {
      this.getList()

   }

}
</script>

<style scoped>
.list{
   column-count: 2;
   column-gap: .09rem;
   width: 7.2rem;
   margin:.24rem .15rem;
   margin: auto;
   
}
</style>